<template>
  <div class="searchList">
    <van-search
      shape="round"
      background="#c82519"
      placeholder="请输入搜索关键词"
    />
    <!-- 商品列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getData"
      class="goods-list"
    >
      <virtual-list
        class="scroller"
        :data-key="'id'"
        :data-sources="visibleData"
        :data-component="List"
        :keeps="20"
        :estimate-size="105"
        :extra-props="{ getData, goodsList }"
      >
      </virtual-list>
    </van-list>
  </div>
</template>

<script>
import virtualList from 'vue-virtual-scroll-list'
import { getgoodsList } from '@/api/home'
// import listMixins from '@/mixins/list'
import List from '@/views/GoodLsit/list.vue'
export default {
  name: 'listinf',
  data () {
    return {
      goodsList: [],
      visibleData: [],
      List: List,
      loading: false, //是否加载
      finished: false, //是否加载完成
      count: 0, //页码
      limitNum: 10 //页容量,
    }
  },
  // mixins: [listMixins],
  mounted () {
    window.scrollTo(0, 0)
    this.getData()
    // this.visibleData = this.goodsList.slice(0, 20)
  },
  methods: {
    async getData () {
      this.count++
      const res = await getgoodsList()
      // console.log(res)
      this.goodsList = [...this.goodsList, ...res.data]
      this.goodsList = this.goodsList.map((item, index) => {
        index++
        return (item = { ...item, id: index })
      })
      this.visibleData = this.goodsList.slice(0, 20)
      // console.log(this.goodsList)
      // console.log(this.visibleData.length)
      const startIndex = this.visibleData.length
      const endIndex = startIndex + 20
      this.visibleData = [
        ...this.visibleData,
        ...this.goodsList.slice(startIndex, endIndex)
      ]
      if (this.goodsList.length >= 100) {
        this.finished = true
      }
      this.loading = false
      // this.isloading = false
    }
  },
  components: {
    virtualList
  }
}
</script>

<style lang="scss" scoped>
.searchList {
  height: 100%;
}
.van-search {
  width: 100%;
  height: 55px;
}
.goods-list {
  height: calc(100% - 55px);
}
.scroller {
  overflow-y: scroll;
}
</style>
